<template>
  <div class="app-container">
    <el-card style="height: 100%; overflow-y: auto">
      <el-form ref="form" :rules="rulesForm" :model="form" label-width="120px">
        <el-form-item label="标题：" prop="title">
          <el-input
            maxlength="64"
            show-word-limit
            style="width: 80%"
            v-model="form.title"
          />
          <div
            style="
              margin-left: 20px;
              color: #aaa;
              line-height: 30px;
              font-size: 14px;
            "
          >
            <div>建议不超过17字</div>
          </div>
        </el-form-item>
        <el-form-item label="副标题：" prop="subTitle">
          <el-input
            type="textarea"
            maxlength="200"
            style="width: 1000px"
            show-word-limit
            v-model="form.subTitle"
          />
          <div
            style="
              margin-left: 20px;
              color: #aaa;
              line-height: 30px;
              font-size: 14px;
            "
          >
            <div>建议17字内</div>
          </div>
        </el-form-item>
        <el-form-item label="封面图：" prop="pic">
          <div style="display: flex">
            <single-upload
              uploadType="2"
              v-model="form.pic"
              :width="'140px'"
              :height="'220px'"
              :border="'1px solid #ccc'"
            >
              <div
                class=""
                style="line-height: 140px; margin-top: 40px"
                v-if="!form.pic"
              >
                <i
                  style="font-size: 40px; color: #ccc; font-weight: bold"
                  class="el-icon-plus"
                ></i>
              </div>
            </single-upload>

            <div
              style="
                margin-left: 20px;
                color: #aaa;
                line-height: 30px;
                margin-top: 20px;
                font-size: 14px;
              "
            >
              <div>温馨提示</div>
              <div>1、支持jpg、jpeg、png格式的图片文件</div>
              <div>2、尺寸比较建议长宽420*660，大小限制在2M以下</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="发布平台：" prop="platformType">
          <el-checkbox-group v-model="form.platformType">
            <el-checkbox
              v-for="city in cities"
              :label="city.dictValue"
              :key="city.dictValue"
              >{{ city.dictLabel }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <!-- <el-form-item label="标签">
          <el-input
            v-model="form.label"
            placeholder="请选择标签"
            style="width: 1000px"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            style="width: 1000px"
            type="textarea"
            v-model="form.description"
            placeholder="请输入描述"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="课程介绍">
          <Tinymce ref="tinymce" v-model="form.content" :height="600" />
          <!--<el-input v-model="form.content" placeholder="请输入内容"></el-input>-->
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            maxlength="200"
            type="textarea"
            show-word-limit
            style="width: 1000px"
            v-model="form.note"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="浏览量">
          <el-input type="number" style="width: 1000px" v-model="form.visitCount" placeholder="请输入内容"></el-input>
        </el-form-item> -->
        <el-form-item label="虚拟学习人数">
          <el-input
            type="number"
            style="width: 1000px"
            v-model="form.virtualStudyCount"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="素材列表" prop="title">
          <el-button type="primary" size="small" @click="addMaterials"
            >添加素材</el-button
          >
          <table-list :table-data="multipleSelection"></table-list>
        </el-form-item>
        <el-form-item>
          <div style="margin-left: 350px">
            <el-button
              style="width: 100px"
              type="primary"
              @click="handleSubmit('form')"
              >确定</el-button
            >
            <el-button @click="handleClose()" style="width: 100px"
              >返回</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <add-mater ref="addMater" @tableChoose="tableChange"></add-mater>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import SingleUpload from "@/components/Upload/uploadOne";
import { addArticle, editArticle } from "@/api/article";
import {
  subjectAddApi,
  subjectDetailApi,
  subjectUpdateApi,
} from "@/api/lesson";
import AddMater from "./components/addMater.vue";
import TableList from "./components/tableList.vue";

const form = {
  title: "",
  subTitle: "",
  pic: "",
  label: "",
  description: "",
  content: "",
  note: "",
  virtualStudyCount: "",
  platformType: ["2"],
};
export default {
  name: "add",
  components: { TableList, AddMater, SingleUpload, Tinymce },
  data() {
    return {
      cities: "",
      props: {
        emitPath: false,
      },

      form: Object.assign({}, form),
      rulesForm: {
        title: [
          { required: true, message: "", trigger: "blur" },
          {
            min: 1,
            max: 64,
            message: "长度在 1 到 64 个字符",
            trigger: "blur",
          },
        ],
        platformType: [
          { required: true, message: "请选择发布平台", trigger: "change" },
        ],
        pic: [{ required: true, message: "请上传封面图", trigger: "change" }],
        content: [{ required: true, message: "", trigger: "blur" }],
      },
      cateList: [],
      multipleSelection: [],
      // videoUrl: "108621bb3ab671efbfc75017f0f90102"
    };
  },
  async created() {
    this.cities = await this.$getDictData("platform_type");
    if (this.$route.query.id) {
      this.getInfo();
    }
  },
  mounted() {},
  methods: {
    addMaterials() {
      this.$refs.addMater.openDialog(this.multipleSelection);
    },
    tableChange(val) {
      let arr = this.multipleSelection.concat(val);
      this.multipleSelection = Array.from(
        new Set(arr.map((item) => item.id))
      ).map((id) => arr.find((item) => item.id === id));
    },
    handleSubmit() {
      this.form.materials = this.multipleSelection;
      console.log(this.form.materials);

      if (this.form.materials.length == 0) {
        this.$message.error("素材列表不能为空");
        return;
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.platformType =
            typeof this.form.platformType == "object"
              ? this.form.platformType.join(",")
              : this.form.platformType;
          if (this.$route.query.id) {
            subjectUpdateApi(this.form).then((res) => {
              this.$message.success("修改成功");
              setTimeout(() => {
                this.$router.go(-1);
              }, 1000);
            });
          } else {
            subjectAddApi(this.form).then((res) => {
              this.$message.success("添加成功");
              setTimeout(() => {
                this.$router.go(-1);
              }, 1000);
            });
          }
        }
      });
    },
    handleClose() {
      this.$router.go(-1);
    },

    goBack() {
      this.$router.go(-1);
    },
    editVideoId(v) {
      this.form.videoId = v;
    },
    getInfo() {
      subjectDetailApi(this.$route.query.id).then((res) => {
        this.$route.meta.title = "编辑专题";
        this.form = Object.assign({}, res.data);
        this.form.platformType = [];
        res.data.platformType.split(",").map((item) => {
          this.form.platformType.push(item + "");
        });
        this.multipleSelection = res.data.materials;
        this.$refs.tinymce.setContent(this.form.content);
      });
    },
    onSubmit(form, type) {
      //tasksStatus   1->暂存未发布；2->定时发布；3->取消定时发布；4->已发布
      this.$refs[form].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form));
          if (params.relation) {
            console.log(params.relation);
            params.relation = JSON.stringify(params.relation);
          }
          if (params.productList) {
            delete params.productList;
          }
          if (params.publishStatus != 1) {
            // 判断是否立即发布
            params.tasksStatus = type;
            // delete params.publishStatus;
          } else {
            delete params.tasksStatus;
          }
          console.log("--------------------------", params);

          // this.form.platformType =this.form.platformType.join(",")
          params.hotTopicId = params.hotTopicId.join(",");
          // params.platformType = params.platformType.join(",");
          if (this.$route.query.id) {
            editArticle(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "编辑成功",
                  type: "success",
                });
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
            });
          } else {
            console.log(params);

            addArticle(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "发布成功",
                  type: "success",
                });
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
.image-message {
  height: 96px;
  //display: flex;

  > div {
    &:nth-child(2) {
      //margin-right: 20px;
      //width: 500px;
    }
  }
}
.product-img {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  .product-img-box {
    position: relative;
    .i2 {
      position: absolute;
      right: -1px;
      top: -5px;
    }
  }
  .uploadPic {
    width: 96px;
    height: 96px;
    // margin-left: 10px;
    background: #eeeeee;
    border-radius: 8px;
    position: relative;

    .i1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  img {
    width: 96px;
    height: 96px;
    margin-right: 13px;
  }
}
.imageBg {
  width: 220px;
  height: 140px;
  line-height: 140px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.uploadPic1 {
  min-width: 96px;
  height: 96px;
  // margin-left: 10px;
  background: #fff;
  border-radius: 8px;
  position: relative;
  border: 1px solid #eee;

  .i1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.uploadPic2 {
  width: 90px;
  height: 90px;

  background: #eeeeee;
  border-radius: 8px;
  position: relative;
  > i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
/deep/ .el-input,
/deep/ .el-textarea {
}
/deep/.el-form-item__content {
  display: flex !important;
  flex-direction: row;
  // align-items: center;
}
</style>
